import React from 'react';
import ReactDOM from 'react-dom';
import { Checkbox, Modal, Button, Radio, Form, Row, Col  } from 'antd';
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
let CostModal = React.createClass({
    getInitialState(){
        return {
            visible: false,
            checkedCost: [],
            checkedCostNew: [],
            allCostList: {},
            curChecked: [],
            unit1:[],
            unit2:[],
            unit3:[],
            unit1Radio: [],
            unit2Radio: [],
            unit3Radio: [],
            unit1Checked:'',
            unit2Checked:'',
            unit3Checked:'',
        }
    },
    componentWillReceiveProps(nextProps){
        this.getUnit(nextProps.allCostList);
        console.log('checkedCostNew',nextProps.checkedCostNew);
        this.getCheckedId(nextProps.checkedCostNew);
        this.setState({
            visible: nextProps.visible,
            checkedCost: nextProps.checkedCost,
            allCostList: nextProps.allCostList,
            curChecked: nextProps.checkedCost,
            checkedCostNew: nextProps.checkedCostNew,            
        });
    },
    // 判断对象是否为空
    isEmptyObject(e) {  
        var t;  
        for (t in e)  
            return !1;  
        return !0  
    }, 
    getCheckedId(data){
        let unit1Checked = '';
        let unit2Checked = '';
        let unit3Checked = '';
        if(!this.isEmptyObject(data)){
            let classify2 = data.classify2;
            if(!this.isEmptyObject(classify2)){
                unit1Checked = classify2.unit1.length> 0?classify2.unit1[0]: '';
                unit2Checked = classify2.unit2.length> 0?classify2.unit2[0]: '';
                unit3Checked = classify2.unit3.length> 0?classify2.unit3[0]: '';
                this.setState({
                    unit1Checked: unit1Checked,
                    unit2Checked: unit2Checked,
                    unit3Checked: unit3Checked
                });
            }
        }
        
    }, 
    getUnit(data){
        let unit1 = [];
        let unit2 = [];
        let unit3 = [];
        
        if(!this.isEmptyObject(data)){
            let classify2 = data.classify2;
            if(!this.isEmptyObject(classify2)){
                
                
                unit1Radio = this.getRadioData(classify2.unit1);
                unit2Radio = this.getRadioData(classify2.unit2);
                unit3Radio = this.getRadioData(classify2.unit3);

                this.setState({
                    unit1: classify2.unit1,
                    unit2: classify2.unit2,
                    unit3: classify2.unit3,
                    unit1Radio: unit1Radio,
                    unit2Radio: unit2Radio,
                    unit3Radio: unit3Radio,
                });
            }
            
        }
       
    },
    // 构建radio
    getRadioData(data){
        let radioData = data;
        let radioArry = [];
        if(radioData.length > 0){
            radioData.forEach((item) => {
                let key = `${item.value}`;
                let content = (
                    <Radio key={key} value={key} >{item.label}</Radio>
                );
               radioArry.push(content); 
            });          
        }
        return radioArry
    },

    handleCancel(){
        this.props.hideModal();
    },

    onChange(checkedValues) {
        console.log('checked = ', checkedValues);
        this.setState({
            curChecked: checkedValues,
            checkedCost: checkedValues
        });
  
    },

    // pushArry(checkedId, target){
    //     if(checkedId){            
    //         if(target.indexOf(checkedId) == -1){
    //             target.push(checkedId);
    //         }                      
    //     }
    //     return target
    // },
  pushArry(checkedId, target, data){  
    let flag = 0;
    let index;
    if(data){
        data.forEach((item) => {
            if(target.indexOf(item.value) != '-1'){ //存在
                flag = 1;
                index = target.indexOf(item.value)
            }
        })
    } 
    if(flag == 1){
        target.splice(index,1)
    }
    if(checkedId){
        target.push(checkedId);
    }
    
    return target
  },
    handleOk(){
        console.log(this.state.unit1Checked);
        let curChecked = this.state.curChecked;
        
        curChecked = this.pushArry(this.state.unit1Checked, curChecked, this.state.unit1);
        curChecked = this.pushArry(this.state.unit2Checked, curChecked, this.state.unit2);
        curChecked = this.pushArry(this.state.unit3Checked, curChecked, this.state.unit3);
        
        this.props.getCheckedCost(curChecked);
        this.props.getCheckedCostNew(curChecked);
        
        console.log('1111111111111',curChecked)
        this.props.addCostList();
        this.handleCancel();
    },

    onChangeRadio(obj, e){
        console.log('radio checked', e.target.value);
        let checkedCost = this.state.checkedCost;
        
        let type = obj.type;
        switch(type) {
           case 'unit1':
                this.setState({
                    unit1Checked: e.target.value,
                });
                break;
            case 'unit2':
                this.setState({
                    unit2Checked: e.target.value,
                });
                break;
            case 'unit3':
                this.setState({
                    unit3Checked: e.target.value,
                });
                break;

        }
    },
    render(){
    
        return (
            <Modal title="选择收费项" 
                visible={this.state.visible}
                onOk={this.handleOk} 
                onCancel={this.handleCancel}>
            
             <h5 style={{margin: 10}}>固定</h5>
             <div style={{margin:10}}>
                <CheckboxGroup options={this.state.allCostList.classify1} value={this.state.checkedCost} onChange={this.onChange} />
             </div>
             <h5 style={{margin: 10}}>仪表</h5>  
             <div style={{margin:10}}>
                <span>电费：</span>
                {
                    this.state.unit1Radio?
                    <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit1'})} value={this.state.unit1Checked}>
                        {
                            this.state.unit1Radio
                        }
                    </RadioGroup>:
                    '暂无收费项'
                }
                
            </div>
            <div style={{margin:10}}>
                <span>水费：</span>
                {
                    this.state.unit2Radio?
                    <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit2'})} value={this.state.unit2Checked}>
                        {
                            this.state.unit2Radio
                        }
                    </RadioGroup>:
                    '暂无收费项'
                }
                
            </div>
            <div style={{margin:10}}>
                <span>天然气：</span>
                {
                    this.state.unit3Radio?
                    <RadioGroup onChange={this.onChangeRadio.bind(this, {type: 'unit3'})} value={this.state.unit3Checked}>
                        {
                            this.state.unit3Radio
                        }
                    </RadioGroup>:
                    '暂无收费项'
                }
                
            </div>
            
                
           
            
            </Modal>
        );
        
    }
});



export default CostModal;